<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.to .tt{
				width: 100px;
				height: 50px;
				background-color: blue;
				border: solid darkgrey 2px;
				font-size: 25px;
			}

			
			*{
				margin: 0;
				padding: 0;
				list-style:none;
			}
			#sz{
				width: 520px;
				height: 50px;
				margin: 0 auto;
				font-size: 10px;
				text-align: center;
			}
			#sz input{
				width: 100px;
				height: 50px;
				
			
			}

			.to{
				width: 1100px;
				height: 30px;
				margin-top: 100px;
				margin-left: 300px;
				
			}
			
			.to .ss{
				width: 800px;
				height: 50px;
				border-radius:60px;
				text-indent: 2em;
				border: blue solid 2px;
				font-size: 25px;
			}	
			.to .tt:hover{
				color: white;
				
			}
			/* 主题 */
			.box{
				width: 1000px;
				height: 1000px;
				/* background-color: #00F5FF; */
				margin: 13px 350px;
				padding-top: 50px;
			}
			
			.box ul{
				width: 1000px;
				height: 150px;
				border-radius: 20px;
			}
			.box>div{
				width: 300px;
				height: 800px;
				margin-left: -290px;
				float: left;
			}
			.box .zuo{
				width: 280px;
				height: 150px;
				/* border: solid 2px red; */
				font-size: 20px;
				color: black;
				margin: 0px auto;
				text-align: center;
				line-height: 160px;
				font-size: 28px;
				transition: 2s;  
			}
			.box .zuo:hover{
				background-color: blue;
				color: black;
				width: 1300px;
				text-align: left;
				border-radius: 20px;
			}
			.box ul li{
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 40px;
				margin-top: 26px;
				text-align: center;
				/* background-color: #FF0000; */
				
			}
			.box ul li div img{
				margin-top: 20px;

			}
			.box ul li a{
				text-decoration: none;
				color: red;
			}
			.box ul li div:hover{
				transition: all 0.8s ease;
				color: white;
				background-color: #A9A9A9;
				border-radius: 20px;
				
			}
			
			/* 倒计时 */
			
			
			#demo{
				width: 450px;
				height: 80px;
				background-color: black;
				font-size: 30px;
				color: #FF0000;
				margin: 0 auto;
				text-align: center;
				
			}
			
			
			
			@media (max-width:750px){
				
				.box ul{
					width: 600px;
					margin-left: -270px;
				}
				
				.to .ss{
					width: 560px;
					margin-left: -270px;
					
				}
				.box>div{
					display: none;
					
				}
				}
			
			
			
			
		</style>
	</head>
	<body id="bod">
			
		<!-- 倒计时 -->
			<div id="demo">
		
			</div>
		
		
			<div id="sz">
				<input style="background-color: white;" type="button" value="白色" onclick="color('white')"/>
				<input style="background-color: red;"   type="button" value="红色" onclick="color('red')" />
				<input style="background-color: green;" type="button" value="绿色" onclick="color('green')"/>
				<input style="background-color: blue;" type="button" value="蓝色"  onclick="color('blue')"/>
				<input style="background-color: fuchsia;" type="button" value="粉色"  onclick="color('fuchsia')"/>
		
			</div>
			<!-- <form class="to"  target="_blank" method="get" action="https://cn.bing.com/">
				<input class="ss" type="text" name="p" placeholder="今天想要了解什么呢~(*＞◡❛)♡" />
				<input class="tt" type="submit" value="百度一下"/>
			</form> -->

			
				<form class="to" target="_blank" method="get" action="https://cn.bing.com/" >
					<input class="ss" type="text"  placeholder="今天想要了解什么呢~(*＞◡❛)♡" name="q" class="text" />
					<input class="tt" type="submit"  value="搜索！" class="search">
				</form>
				
				
				
			<div class="box">
				<div>
				 <p class="zuo bian1">学习教程</p>
				 <p class="zuo bian2">学习教程</p>
				 <p class="zuo bian3">学习教程</p>
				 <p class="zuo bian4">学习教程</p>
				 </div>
			<ul>
			
				<li>
					<a href="https://www.bilibili.com/" target="_blank"	>
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
						哔哩哔哩
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://wallpaperscraft.com/catalog/anime" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					壁纸网站
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.bilibili.com/video/BV1gK411P7RQ?p=113&vd_source=f49ce043d3d49d5a2da2ec78bda0dada" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					老杜的课
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.h5course.com/a/20150503118.html" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					键盘的键值
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://user.mihoyo.com/#/login/captcha" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					米友社通行证
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.huya.com/" target="_blank">
					<div>
					<img src="img/hy.jpg" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					虎牙直播
					
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://blog.csdn.net/qq_43461350/article/details/105807156" target="_blank">
					<div>
					<img src="img/hy.jpg" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					页面跳转
					
					</div>
					</a>
				</li>
				
			</ul>
			
			<!-- 第二排 -->
			<ul>
			
				<li>
					<a href="https://uniapp.dcloud.net.cn/quickstart.html#" target="_blank"	>
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
						unipp
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://iconpark.oceanengine.com/official" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					图标
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.iconfont.cn/illustrations/index?spm=a313x.search_index.i3.7.21663a81D1UGAJ" target="_blank">
					<div>
					<img src="img/1.svg" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					阿里云图标
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.bilibili.com/video/BV1yy4y1V7q3?p=4&vd_source=f49ce043d3d49d5a2da2ec78bda0dada" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					AE 教程
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.w3school.com.cn/cssref/css_selectors.asp" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					css选择器
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.bilibili.com/video/BV1Kb4y1U7c9?p=10&vd_source=f49ce043d3d49d5a2da2ec78bda0dada" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					AE 总教程
					
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.lookae.com/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					AE教程
					
					</div>
					</a>
				</li>
				
			</ul>
			
			<!-- 第三排 -->
			
			<ul>
				<li>
					<a href="https://www.huya.com/g/7185" target="_blank"	>
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
						金铲铲直播
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://v.qq.com/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					腾讯视频
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://blog.tomys.top/2022-07/GenshinLauncher/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					原神切服器
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://github.com/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					github
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://ywyj.cn/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					一网一匠
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://seaart.ai/?ad=060620&utm_source=xinquji" target="_blank">
					<div>
					<img src="img/aitp.jpg" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					ai生图
					
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.yunedit.com/createcert" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					免费生成证书
					
					</div>
					</a>
				</li>
				
			</ul>
			
			<!-- 第四排 -->
			<ul>
				<li>
					<a href="https://zz.ke.com/?utm_source=biying&utm_medium=pinzhuan&utm_term=biaoti&utm_content=biaotimiaoshu&utm_campaign=wymoren" target="_blank"	>
					<div>
					<img src="img/zf.jpg" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
						贝壳
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.bilibili.com/video/BV1Bp4y1379L/?p=2&spm_id_from=pageDriver&vd_source=f49ce043d3d49d5a2da2ec78bda0dada" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					B战教程
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://blog.tomys.top/2022-07/GenshinLauncher/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					原神切服器
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://github.com/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					github
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://ywyj.cn/" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					一网一匠
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://seaart.ai/?ad=060620&utm_source=xinquji" target="_blank">
					<div>
					<img src="img/aitp.jpg" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					ai生图
					
					</div>
					</a>
				</li>
				
				<li>
					<a href="https://www.yunedit.com/createcert" target="_blank">
					<div>
					<img src="img/blbl.png" style=" width: 50px; height: 50px;" title="点我快点6的"  alt="图片被外星人劫走了"><br>
					免费生成证书
					
					</div>
					</a>
				</li>
				
			</ul>
			</div>
	</body>
	<script type="text/javascript">
		var an = document.getElementById("bod");
		
		function color(x){
			document.body.style.backgroundColor = x;
		}
		
		//倒计时：
		var demo=document.getElementById("demo");
		var endTime=new Date("2025/2/1 22:35:0");
		// 声明目标时间
		 setInterval(clock,1000);
		function clock(){
			
			var nowTime=new Date();
			// 声明现在的时间
			// console.log(nowTime.getTime());// 1724590896086
			
		//(目标时间-现在时间)/1000是要把毫秒排除掉
		var second=parseInt((endTime.getTime()-nowTime.getTime())/1000);
		// console.log(second);
		
//方法 . getTime 输出的是当前的是秒数 精确到毫秒13748545 后5位毫秒  /1000是要把毫秒排除掉
		
		//现在的second是倒计时秒数
		//second/3600是剩余的小时，除24是不是1天
		//一个小时=3600秒
		// 一分钟 = 60秒
//得到天
		var d=parseInt(second/3600/24);
			// console.log(d);
		
//得到小时	
		//%返回的 值是当前的 余数  13748545 除于3600 除于24 取他的商的余数值
		var h=parseInt(second/3600%24);
		// console.log(h);	
		
//得到分钟		
		//得到分 4200/60=70分  转换:1小时10分钟
		var m=parseInt(second/60%60)
		// console.log(m);
		
//得到秒数	
		var s=parseInt(second%60)
		// console.log(s)
		
		d<10?d="0"+d:d;
		h<10?d="0"+d:h;
		m<10?d="0"+d:m;
		s<10?d="0"+d:s;
		demo.innerHTML="毕业:"+d+"天"+h+"小时"+m+"分"+s+"秒";
		}
		
		
		
		
		an.onkeydown = function(x){
			// console.log(x);
			if(x.keyCode == 13){
				document.body.style.backgroundColor = "#999AAA";
				console.log("灰色")
			}else{
				document.body.style.backgroundColor = "white";
				console.log("白色")
			}
		}
	</script>
</html>
